<template>
	<view class="mobilScreen w-full pb-50px relative">
		<view class="bg w-full h-full absolute top-0px">
			<image src="/pagesPoster/static/mobilScreen/bg-2806dc.jpg" mode="widthFix" class="w-full h-full"></image>
		</view>
		<view class="relative">
			<view class="flex flex-x-center pt-60px">
				<view class="time px-40px leading-60px rounded-10px text-center color-white text-24px">{{state.time}}
				</view>
			</view>
			<view class="flex flex-x-center mt-40px text-center leading-120px color-white text-52px">
				<view class="item mx-10px w-120px h-120px rounded-20px">1</view>
				<view class="item mx-10px w-120px h-120px rounded-20px">6</view>
				<view class="item mx-10px w-120px h-120px rounded-20px">8</view>
				<view class="item mx-10px w-120px h-120px rounded-20px">9</view>
				<view class="unit">单</view>
			</view>

			<view class="mt-50px">
				<view class="text-center color-white text-40px">活动数据统计</view>
				<view class="mx-40px mt-30px flex flex-x-around leading-60px text-center bg-white rounded-10px">
					<view class="mx-10px">
						<view class="text-24px">浏览(次)</view>
						<view class="text-32px color-pink">222</view>
					</view>
					<view class="mx-10px">
						<view class="text-24px">分享(次)</view>
						<view class="text-32px color-pink">222</view>
					</view>
					<view class="mx-10px">
						<view class="text-24px">粉丝(人)</view>
						<view class="text-32px color-pink">222</view>
					</view>
					<view class="mx-10px">
						<view class="text-24px">进账(元)</view>
						<view class="text-32px color-pink">222</view>
					</view>
				</view>
			</view>

			<view class="mt-50px">
				<view class="text-center color-white text-40px">团队数据统计</view>
				<view class="mx-40px mt-30px leading-60px bg-white rounded-10px">
					<view class="mx-10px px-10px py-5px">
						<text class="circle">01</text> 江南地区
						<view class="flex flex-x-between">
							<view class="flex">
								<view class="text-24px">订单(单)</view>
								<view class="text-32px ml-10px color-pink">222</view>
							</view>
							<view class="flex">
								<view class="text-24px">分享(次)</view>
								<view class="text-32px ml-10px color-pink">222</view>
							</view>
							<view class="flex">
								<view class="text-24px">浏览(次)</view>
								<view class="text-32px ml-10px color-pink">222</view>
							</view>
						</view>
					</view>
				</view>

				<view class="mx-40px mt-30px leading-60px bg-white rounded-10px">
					<view class="mx-10px px-10px py-5px">
						<text class="circle">02</text> 江南地区
						<view class="flex flex-x-between">
							<view class="flex">
								<view class="text-24px">订单(单)</view>
								<view class="text-32px ml-10px color-pink">222</view>
							</view>
							<view class="flex">
								<view class="text-24px">分享(次)</view>
								<view class="text-32px ml-10px color-pink">222</view>
							</view>
							<view class="flex">
								<view class="text-24px">浏览(次)</view>
								<view class="text-32px ml-10px">222</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="mt-50px">
				<view class="text-center color-white text-40px">最近订单</view>
				<swiper class="swiper h-450px" circular :autoplay="true" :interval="2000" :duration="500" vertical
					display-multiple-items='3'>
					<swiper-item v-for="(item,index) in state.orderList" :key="index">
						<view class="orderItem mx-40px mt-30px leading-50px rounded-10px text-24px bg-white">
							<view class="px-10px py-8px flex flex-x-between">
								<view class="flex flex-y-center">
									<uv-avatar :src="item.src" :size="40"></uv-avatar>
									<view class="ml-10px">
										<view>{{item.name}}</view>
										<uv-text mode="phone" format="encrypt" :text="item.phone"></uv-text>
									</view>
								</view>
								<view class="text-right">
									<view>{{item.recommendName}}</view>
									<view>{{item.time}}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script setup name="MobilScreen">
	import {
		ref,
		reactive,
	} from "vue"

	const state = reactive({
		time: uni.$uv.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
		orderList: [{
				id: 0,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '0肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			},
			{
				id: 1,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '1肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			},
			{
				id: 2,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '2肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			},
			{
				id: 3,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '3肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			},
			{
				id: 4,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '4肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			},
			{
				id: 5,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '5肖诗雨',
				phone: '13661336773',
				recommendName: '甄老师',
				time: '03-11 19:33',
			}
		]
	})
</script>

<style lang="scss">
	page {
		background: #2806dc;
	}

	.time {
		// border: 1px solid #11006a
		border: 1px solid #001a9c;
		background: rgba(65, 239, 130, 0.2);
	}

	.item {
		background: #3232e2;
	}

	.unit {
		line-height: 30px;
		font-size: 30rpx;
		justify-self: flex-end;
		align-self: flex-end;
	}

	.circle {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		border-radius: 50px;
		text-align: center;
		font-size: 24rpx;
		border: 1px solid #000;
	}
</style>